<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
    />
    <!-- AddAgent优惠活动 -->
    <div>
      <el-dialog
        width="600px"
        title="AddAgent Promotional Activities"
        :visible.sync="dialogFormVisible"
      >
        <el-form style="display: flex;justify-content: center;">
          <el-form-item label="Agent" :label-width="formLabelWidth">
            <el-select
              placeholder="Please Select Agent"
              :clearable="true"
              v-model="agentValue"
              style="width:250px"
            >
              <el-option
                v-for="item in agentArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-form style="display: flex;justify-content: center;">
          <el-form-item
            label="Promotional Activities"
            :label-width="formLabelWidth"
          >
            <el-select
              placeholder="Please Select Activity"
              :clearable="true"
              v-model="agentIdValue"
              multiple
              style="width:250px"
            >
              <el-option
                v-for="item in agentIdArr"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>Agent Already Add Marketing Activities：</div>
        <el-table :data="inquireAgentData">
          <el-table-column
            property="activityName"
            label="Selected Activities"
            align="center"
          />
          <!-- <el-table-column
            property="activityDesc"
            label="活动Describe"
            width="150"
            align="center"
          /> -->
          <el-table-column
            property="startTime"
            label="Activity Start Time"
            align="center"
          />
          <el-table-column
            property="endTime"
            label="Activity End Time"
            align="center"
          />
        </el-table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="affirmAgentFn">Confirm</el-button>
        </div>
      </el-dialog>
    </div>

    <r-table
      :isSelection="false"
      :isHandle="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      @refresh="page()"
    />
    <r-form
      labelWidth="150px"
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
      ref="elForm"
      :inline="false"
      dialogWidth="750px"
    >
      <!-- Add活动--活动规则数组 -->
      <div slot="slot" class="" id="powerNorm">
        <el-form
          labelWidth="160px"
          class="fl-aic"
          v-for="(item, index) in formData.payActivityList"
          :key="item.id"
        >
          <!-- <el-form-item
            label="Package Name"
            :prop="'payActivityList.' + index + '.ruleName'"
            :rules="formRules.ruleName"
            class="w54MB20"
          >
            <el-input v-model="item.ruleName" placeholder="Please Enter" />
          </el-form-item> -->
          <!-- <el-form-item
            v-if="formData.activityType === 0"
            class="w54MB20"
            label="Employ限制规则"
            :prop="'payActivityList.' + index + '.activityCondition'"
            :rules="formRules.activityCondition"
          >
            <el-input
              type="number"
              v-model="item.activityCondition"
              placeholder="活动Type是优惠活动时请填写"
            />
          </el-form-item> -->
          <el-form-item
            class="w54MB20"
            label="Coupon Type"
            :prop="'payActivityList.' + index + '.couponId'"
            :rules="formRules.couponId"
          >
            <el-select
              placeholder="Please Select"
              :clearable="true"
              v-model="item.couponId"
              style="width:100%"
            >
              <el-option
                v-for="item in youhuiIdValue"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="w54MB20 fJ"
            label="Released Quantity"
            :prop="'payActivityList.' + index + '.couponTotal'"
            :rules="formRules.couponTotal"
          >
            <el-input
              type="number"
              v-model="item.couponTotal"
              placeholder="Please Input Number,Just enter an unlimited number of zeros"
            />
          </el-form-item>
          <el-form-item
            class="w54MB20"
            label="User Coupon Collection Number"
            :prop="'payActivityList.' + index + '.couponLimit'"
            :rules="formRules.couponLimit"
          >
            <el-select
              placeholder="Please Select"
              :clearable="true"
              v-model="item.couponLimit"
              style="width:100%"
            >
              <el-option
                v-for="item in userNumValue"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="w54MB20"
            label="Valid Duration(day)"
            :prop="'payActivityList.' + index + '.days'"
            :rules="formRules.days"
          >
            <el-input
              type="number"
              v-model="item.days"
              placeholder="Please Enter"
            />
          </el-form-item>

          <el-form-item style="display:flex">
            <i
              v-show="index == 0"
              class="el-icon-circle-plus fl-aic"
              @click="addItem(item, index)"
              style="font-size: 25px;margin-left:8px;"
            ></i>
            <i
              v-show="index !== 0"
              class="el-icon-delete fl-aic"
              @click="deleteItem(item, index)"
              style="font-size: 20px;margin-left:10px;"
            ></i>
          </el-form-item>
        </el-form>
      </div>
    </r-form>
    <!-- 活动续期 -->
    <el-dialog
      title="Activity Continue"
      :visible.sync="renewalShow"
      width="500px"
    >
      <el-form
        :model="renewalData"
        :status-icon="true"
        :rules="renewalRules"
        ref="renewalData"
        label-width="170px"
        class="renewalData"
      >
        <el-form-item label="Activity ID" prop="id">
          <el-input v-model="renewalData.id" disabled />
        </el-form-item>
        <el-form-item label="Continue Duration(day)" prop="day">
          <el-input type="number" v-model="renewalData.day" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renewalShow = false">Cancel</el-button>
        <el-button type="primary" @click="renewalSubmit('renewalData')"
          >Confirm</el-button
        >
      </div>
    </el-dialog>
    <!-- 活动Details -->
    <el-dialog title="Activity Details" :visible.sync="particularsShow">
      <el-table :data="particularsData" style="width: 100%">
        <el-table-column align="center" prop="couponName" label="Coupon Name" />
        <!-- <el-table-column align="center" prop="ruleName" label="活动规则" /> -->
        <!-- <el-table-column
          align="center"
          prop="activityCondition"
          label="活动规定"
        >
          <template slot-scope="scope">{{
            scope.row.activityCondition
              ? "消费" + scope.row.activityCondition + "元才可用"
              : "消费0元才可用"
          }}</template>
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="couponDesc"
          label="Coupon Describe"
        />
        <el-table-column align="center" prop="discount" label="Discounts Money">
          <template slot-scope="scope">{{ "$" + scope.row.discount }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="useCount"
          label="Already Received"
        >
          <template slot-scope="scope">{{ scope.row.useCount }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="couponTotal"
          label="Publish Number"
        >
          <template slot-scope="scope">{{
            scope.row.couponTotal == 0
              ? "Infinite Amount"
              : scope.row.couponTotal
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="useCondition"
          label="Employ Limitation"
        >
          <template slot-scope="scope">{{
            "Minimum Charge $" + scope.row.useCondition + "Can Employ"
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="couponLimit"
          label="User Coupon Collection Number"
          ><template slot-scope="scope">{{
            scope.row.couponLimit == 0
              ? "Unlimited Quantity"
              : "Limited To 1 Sheet"
          }}</template></el-table-column
        >
        <el-table-column align="center" prop="couponType" label="Type"
          ><template slot-scope="scope">{{
            scope.row.couponType == 0
              ? "Recharge Coupon"
              : scope.row.couponType == 1
              ? "Temporary Storage Voucher"
              : scope.row.couponType == 2
              ? "Voucher"
              : scope.row.couponType == 3
              ? "Trial Coupon"
              : scope.row.couponType == 4
              ? "Package Deduction Coupon"
              : "--"
          }}</template></el-table-column
        >
        <el-table-column align="center" prop="days" label="Valid Duration">
          <template slot-scope="scope">{{ scope.row.days + "/day" }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var checkToFixedTwo = (rule, value, callback) => {
      const reg = /[^\d]/g;
      if (!reg.test(value)) {
        callback();
      } else {
        return callback(new Error("Please InputInteger Number"));
      }
    };
    return {
      particularsData: [], //活动Details
      particularsShow: false,
      // 活动续期 start
      renewalShow: false,
      renewalData: {
        id: "",
        day: ""
      },
      renewalRules: {
        id: [{ required: true, message: "Please Enter", trigger: "blur" }],
        day: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      // 活动续期 end
      changePwdData: {
        show: false
      },
      tableLoading: false,
      searchData: {
        activityName: "",
        activityType: "",
        agentId: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Activity Name",
          prop: "activityName",
          width: 230
        },
        {
          type: "select",
          placeholder: "Activity Type",
          prop: "activityType",
          width: 250,
          options: [
            { label: "Promotional Activities", value: 0 },
            { label: "New User Register Activity", value: 1 },
            { label: "Temporary Deposit Coupon Activity", value: 2 }
          ]
        },
        {
          type: "select",
          placeholder: "Agent",
          prop: "agentId",
          width: 190,
          options: []
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "primary",
          plain: true,
          handle: async e => {
            this.zeroFn();
            let page = {
              pageNum: this.pagination.offset,
              pageSize: this.pagination.limit,
              activityName: this.searchData.activityName,
              activityType: this.searchData.activityType,
              agentId: this.searchData.agentId
            };
            let res = await this.apis.activityList(page);
            this.tableData = res.rows || [];
            this.pagination.total = res.total;
            console.log(222222, this.searchData, res);
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              activityName: "",
              activityType: "",
              agentId: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableHandles: [
        {
          label: "Add Activity",
          type: "primary",
          plain: true,
          handle: async e => {
            this.elFormVisible();
            // 拿到优惠卷活动信息
            let page = { isOpen: 1 };
            let res = await this.apis.couponList(page);

            let data = res.rows || [];
            this.youhuiIdValue = [];
            data.forEach(i => {
              let arr = {
                id: i.id,
                name: i.name
              };
              this.youhuiIdValue.push(arr);
            });
          },
          disabled: sessionStorage.role == "operator" ? false : true
        },
        {
          label: "Assign Activities Agents",
          type: "primary",
          plain: true,
          isShow: e => {
            return sessionStorage.role == "operator" ? true : false;
          },
          handle: e => {
            this.dialogFormVisible = true;
            this.inquireAgentData = [];
          }
        }
      ],
      tableData: [{}],
      tableCols: [
        // { label: "活动id", prop: "id" },
        { label: "Activity Name", prop: "activityName" },
        {
          label: "Activity Type",
          prop: "activityType",
          formatter: e =>
            e.activityType == 0
              ? "Promotional Activities"
              : e.activityType == 1
              ? "New User Register Activity"
              : e.activityType == 2
              ? "Temporary Deposit Coupon Activity"
              : "--"
        },
        {
          label: "Method Of Issuance",
          prop: "putType",
          formatter: e =>
            e.putType == 0
              ? "User Receive"
              : e.putType == 1
              ? "Automatic Gift"
              : "--"
        },
        // { label: "活动Describe", prop: "activityDesc" },
        {
          label: "Delete",
          prop: "isDel",
          type: "tag",
          formatter: e =>
            e.isDel == 1 ? "Not Deleted" : e.isDel == 2 ? "Have Deleted" : "--",
          theme: e => (e.isDel == 2 ? "danger" : e.isDel == 1 ? "success" : "")
        },
        {
          label: "Status",
          prop: "status",
          formatter: e =>
            e.status == 0
              ? "Underway"
              : e.status == 1
              ? "Have Expired"
              : e.status == 2
              ? "Not Started"
              : "--"
        },
        {
          label: "Forbidden/Enable",
          prop: "isOpen",
          type: "tag",
          formatter: e =>
            e.isOpen == 0 ? "Forbidden" : e.isOpen == 1 ? "Enable" : "--",
          theme: e => (e.isOpen == 0 ? "warning" : "primary")
        },
        { label: "Start Time", prop: "startTime" },
        { label: "End Time", prop: "endTime" },
        {
          label: "Operations",
          type: "button",
          width: 220,
          btnList: [
            {
              label: "Details",
              type: "success",
              size: "mini",
              plain: true,
              style: { "margin-bottom": "5px" },
              handle: async row => {
                let res = await this.apis.activityGetInfo(row.id);
                this.particularsData = res.data.activityRuleList;
                this.particularsShow = true;
                console.log(6666666666, res);
              }
            },
            {
              label: "Renewal",
              type: "primary",
              size: "mini",
              plain: true,
              handle: row => {
                this.renewalShow = true;
                this.renewalData.id = row.id;
                this.renewalData.day = "";
              }
            },
            {
              label: "Forbidden",
              type: "warning",
              size: "mini",
              plain: true,
              handle: async row => {
                let res = await this.apis.activityStartOrStop(row.id);
                this.$message({
                  type: res.code == 200 ? "success" : "error",
                  message: res.msg
                });
                this.getData();
              },
              isShow: row => {
                return row.isOpen == 1 ? true : false;
              }
            },
            {
              label: "Enable",
              type: "primary",
              size: "mini",
              plain: true,
              handle: async row => {
                let res = await this.apis.activityStartOrStop(row.id);
                this.$message({
                  type: res.code == 200 ? "success" : "error",
                  message: res.msg
                });
                this.getData();
              },
              isShow: row => {
                return row.isOpen == 0 ? true : false;
              }
            },
            {
              label: "Delete",
              type: "danger",
              size: "mini",
              plain: true,
              handle: row => {
                this.$confirm(
                  "Confirm To Delete The Current Activity?",
                  "Hint",
                  {
                    confirmButtonText: "Confirm",
                    cancelButtonText: "Cancel",
                    type: "warning"
                  }
                )
                  .then(async () => {
                    let res = await this.apis.activityDelete(row.id);
                    this.$message({
                      type: res.code == 200 ? "success" : "error",
                      message: res.msg
                    });
                    this.getData();
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "Already Cancel Delete"
                    });
                  });
              }
            }
            // {
            //     label: "Edit",
            //     type: "success",
            //     size: "mini",
            //     icon: "el-icon-search",
            //     handle: (row) => {
            //         this.elFormDetail(row)
            //     }
            // },
          ]
        }
      ],
      use: 0,
      pagination: { limit: 10, offset: 1, total: 0 },
      // AddMarketing Activities  start
      formData: {
        activityName: "", //活动Name
        activityType: "", //活动Type(0,Recharge活动 1新UserRegister活动 2暂存券活动)
        putType: "", //Coupon发券Type 0 User领取, 1 自动赠送
        // activityDesc: "", //活动Describe
        // activityUrl: "", //活动图片链接（需要先Employ上传文件接口进行上传,得到文件链接）
        startTime: "", //活动Start Time
        endTime: "", //活动End Time
        payActivityList: [
          {
            // ruleName: "", //规则Name
            // activityCondition: "", //规则限制(活动Type为0时需要输入)
            couponId: "", //优惠卷id
            couponTotal: "", //发放的优惠卷总数(为0无限)
            couponLimit: "", //User领券限制数量，如果是0，则是不限制；默认是1，限领一张.
            days: "" //基于领取时间的有效天数days。
          }
        ]
      },

      formCols: [
        // {
        //   type: "input",
        //   label: "Couponid",
        //   width: 350,
        //   prop: "id",
        //   remark: "天",
        //   isDisabled: () => {},
        //   isShow: () => {}
        // },
        {
          type: "input",
          label: "Activity Name",
          width: 350,
          prop: "activityName",
          placeholder: "Please Enter"
        },
        {
          type: "select",
          label: "Activity Type",
          width: 350,
          prop: "activityType",
          placeholder: "Please Select",
          options: [
            { label: "Promotional Activities", value: 0 },
            { label: "New User Register Activity", value: 1 },
            { label: "Temporary Deposit Coupon Activity", value: 2 }
          ]
        },
        {
          type: "select",
          label: "Coupon Grant Type",
          width: 350,
          prop: "putType",
          placeholder: "Please Select",
          options: [
            { label: "User Receive", value: 0 },
            { label: "Automatic Gift", value: 1 }
          ]
        },
        // {
        //   type: "input",
        //   label: "活动Describe",
        //   width: 350,
        //   prop: "activityDesc",
        //   placeholder: "Please Enter"
        // },
        // {
        //   type: "upload",
        //   label: "活动图片链接",
        //   width: 350,
        //   prop: "activityUrl",
        //   placeholder: "Please Select",
        //   showFileList: true,
        //   listType: "picture-card",
        //   success: e => {
        //     this.formData.activityUrl = e.url || "";
        //   }
        // },
        {
          type: "dateTime",
          label: "Activity Start Time",
          width: 350,
          prop: "startTime"
        },
        {
          type: "dateTime",
          label: "Activity End Time",
          width: 350,
          prop: "endTime"
        },

        {
          type: "slot",
          label: "Package Content",
          prop: "payActivityList",
          name: "slot"
        }
      ],
      formRules: {
        activityName: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        activityType: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        putType: [{ required: true, message: "Please Enter", trigger: "blur" }],
        // activityDesc: [{ required: true, message: "Please Enter", trigger: "blur" }],
        // activityUrl: [{ required: true, message: 'Please Enter', trigger: 'blur' },],
        startTime: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        endTime: [{ required: true, message: "Please Enter", trigger: "blur" }],
        // ruleName: [{ required: true, message: "Please Enter", trigger: "blur" }],
        // activityCondition: [
        //   { required: true, message: "Please Enter", trigger: "blur" }
        // ],
        couponId: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        couponTotal: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        couponLimit: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        days: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        }
      ],
      userNumValue: [
        { name: "Infinite Amount", value: 0 },
        { name: "Limit One Card", value: 1 }
      ],
      youhuiIdValue: [],
      // AddMarketing Activities  end
      agentArr: [],
      isCharge: false,
      isTemporary: false,
      agentIdArr: [],
      dialogFormVisible: false,
      formLabelWidth: "150px",
      agentValue: "",
      agentIdValue: [],
      inquireAgentData: []
    };
  },
  watch: {
    "formData.couponType": {
      handler(newValue, oldValue) {
        console.log(222222, newValue, oldValue);
        this.isFn(newValue);
      },
      deep: true // 深度监听
    },
    dialogFormVisible: {
      handler(newValue, oldValue) {
        if (!newValue && oldValue) {
          this.agentValue = "";
          this.agentIdValue = [];
        } else if (newValue && !oldValue) {
          this.agentValue = "";
          this.agentIdValue = [];
        }
      },
      deep: true // 深度监听
    },
    agentValue: {
      handler(newValue) {
        // console.log('新', newValue, '---旧', oldValue)
        if (newValue) {
          this.yesAgentFn(newValue);
        } else {
          return;
        }
      },
      deep: true // 深度监听
    }
  },
  created() {},
  async mounted() {
    this.getData();
    // 拿到Agentid列表
    let param = {
      pageNum: this.pagination.offset,
      pageSize: this.pagination.limit
    };
    let res = await this.apis.agent_list(param);
    let arr = res.rows;
    let options = [];
    arr.forEach(i => {
      let testAgentArr = {
        id: i.id,
        name: i.name
      };
      options.push({
        value: i.id,
        label: i.name
      });
      this.agentArr.push(testAgentArr);
    });
    this.searchForm[
      this.labIndex2(this.searchForm, "agentId")
    ].options = options;
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    // 获取Agent已经参加的活动
    async yesAgentFn(id) {
      this.agentIdValue = [];
      let res = await this.apis.activityList({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
        agentId: id
      });
      this.inquireAgentData = res.rows || [];

      if (res.code == 200 && res.rows.length !== 0) {
        res.rows.forEach(i => {
          this.agentIdValue.push(i.id);
        });
      }
    },

    addItem(item, index) {
      this.formData.payActivityList.push({
        // power: '',
        // unit: '',
        // price: '',
      });
    },
    deleteItem(item, index) {
      if (item.id) {
        this.$confirm(`Confirm Delete Current Data`, "Hint", {
          confirmButtonText: "Confirm",
          cancelButtonText: "Cancel",
          type: "warning"
        }).then(async () => {
          // const res = await this.apis.delPowerStandard({
          //     type: 1,
          //     id: item.id,
          // });
          // if (res.code == 0) {
          //     this.init();
          //     this.formData.payActivityList.splice(index, 1)
          // }
          // this.$message({
          //     message: res.msg,
          //     type: res.code == 0 ? 'success' : 'error'
          // });
        });
      } else {
        this.formData.payActivityList.splice(index, 1);
      }
    },
    // 活动续期
    async renewalSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await this.apis.activityRenewal(this.renewalData);
          console.log(444, this.renewalData, res);
          this.$message({
            message: res.msg,
            type: res.code == 200 ? "success" : "error"
          });
          this.renewalShow = false;
          this.getData();
        } else {
          this.$message({
            message: "Please fill in the necessary information before renewal",
            type: "error"
          });
          return false;
        }
      });
    },
    async affirmAgentFn() {
      if (!this.agentValue) {
        this.$message({
          message: "Please Select Agent",
          type: "error"
        });
        return false;
      }
      if (this.agentIdValue.length === 0) {
        this.$message({
          message: "Please Select Activity",
          type: "error"
        });
        return false;
      }

      let params = {
        agentId: this.agentValue,
        activityIds: this.agentIdValue
      };
      let res = await this.apis.activityAddActivityForAgent(params);
      this.$message({
        type: res.code == 200 ? "success" : "error",
        message: res.msg
      });
      this.dialogFormVisible = false;
    },
    isShow_() {
      if (this.formData.id) {
        this.formRules.password[0].required = false;
        return true;
      } else {
        this.formRules.password[0].required = true;
        return true;
      }
    },
    changePwdCall() {
      this.changePwdData.show = false;
    },
    del(row) {
      this.$confirm("Confirm Delete?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          var res = await this.apis.user_delete({
            userId: row.userId
          });
          this.$message({
            type: "success",
            message: "Delete Success!"
          });
          this.getData();
        })
        .catch(() => {});
    },
    async getData() {
      let res = await this.apis.activityList({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit
      });
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
      // 拿到WholeMarketing Activities
      if (this.tableData) {
        this.agentIdArr = [];
        this.tableData.forEach(i => {
          let testAgentArr = {
            id: i.id,
            name: i.activityName
          };
          this.agentIdArr.push(testAgentArr);
        });
      }
    },
    page() {
      this.getData();
    },
    createdAcc() {
      this.elFormVisible();
    },
    isFn(value) {
      if (value === 0) {
        this.isCharge = true;
        this.isTemporary = false;
      } else if (value === 1) {
        this.isCharge = false;
        this.isTemporary = true;
      } else {
        this.isCharge = false;
        this.isTemporary = false;
      }
    },

    async elFormDetail(row) {
      this.formData.id = row.id;
      this.formData.name = row.name;
      this.formData.couponDesc = row.couponDesc;
      this.formData.couponTotal = row.couponTotal;
      this.formData.discount = row.discount;
      this.formData.useCondition = row.useCondition;
      this.formData.couponLimit = row.couponLimit;
      this.formData.couponType = row.couponType;
      this.formData.putType = row.putType;
      this.formData.activityDays = row.activityDays;
      this.formData.holdDays = row.holdDays;
      this.formData.days = row.days;
      this.elFormVisible();
      this.isFn(row.couponType);
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.activitySave(this.formData);
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.elFormVisible();
          this.getData();
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.agentIdClass {
  margin-bottom: 20px;
}

.agentIdClass > .el-select {
  margin-left: 8%;
}

.agentIdClass1 > .el-select {
  margin-left: 11%;
}

.w54MB20 {
  width: 76%;
  margin-bottom: 10px;
}

.fJ {
  float: auto;
}
</style>
